<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<c:set var="basePath" value="/zyz"></c:set>
<jsp:include page="template_header.jsp"></jsp:include>

<style>
    * {
        margin:0;
        padding:0;
    }
    a{
        text-decoration: none;
    }
    .container {
        position: relative;
        width: 800px;
        height: 500px;
        margin:50px auto 0 auto;
        box-shadow: 0 0 5px green;
        overflow: hidden;
    }
    .container .wrap {
        position: absolute;
        width: 5000px;
        height: 500px;
        z-index: 1;
    }
    .container .wrap img {
        float: left;
        width: 800px;
        height: 500px;
    }
    .container .buttons {
        position: absolute;
        right: 5px;
        bottom:40px;
        width: 150px;
        height: 10px;
        z-index: 2;
    }
    .container .buttons span {
        margin-left: 5px;
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: green;
        text-align: center;
        color:white;
        cursor: pointer;
    }
    .container .buttons span.on{
        background-color: red;
    }
    .container .arrow {
        position: absolute;
        top: 45%;
        color: green;
        padding:0px 14px;
        border-radius: 50%;
        font-size: 50px;
        z-index: 2;
        display: none;
    }
    .container .arrow_left {
        left: 10px;
    }
    .container .arrow_right {
        right: 10px;
    }
    .container:hover .arrow {
        display: block;
    }
    .container .arrow:hover {
        background-color: rgba(0,0,0,0.2);
    }
</style>
</head>
<body>
<div class="container">
    <div class="wrap" style="left: -800px;">
        <img src="/zyz/images/home.jpg" alt="">
        <img src="/zyz/images/11.jpg" alt="">
        <img src="/zyz/images/22.jpg" alt="">
        <img src="/zyz/images/33.jpg" alt="">
        <img src="/zyz/images/8.jpg" alt="">
        <img src="/zyz/images/home.jpg" alt="">
    </div>
    <div class="buttons">
        <span class="on">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <a href="javascript:;" class="arrow arrow_left">&lt;</a>
    <a href="javascript:;" class="arrow arrow_right">&gt;</a>
</div>
<script>
    var wrap = document.querySelector(".wrap");
    var next = document.querySelector(".arrow_right");
    var prev = document.querySelector(".arrow_left");
    next.onclick = function () {
        next_pic();
    }
    prev.onclick = function () {
        prev_pic();
    }
    function next_pic () {
        index++;
        if(index > 4){
            index = 0;
        }
        showCurrentDot();
        var newLeft;
        if(wrap.style.left === "-4000px"){
            newLeft = -800;
        }else{
            newLeft = parseInt(wrap.style.left)-800;
        }
        wrap.style.left = newLeft + "px";
    }
    function prev_pic () {
        index--;
        if(index < 0){
            index = 4;
        }
        showCurrentDot();
        var newLeft;
        if(wrap.style.left === "0px"){
            newLeft = -4000;
        }else{
            newLeft = parseInt(wrap.style.left)+800;
        }
        wrap.style.left = newLeft + "px";
    }
    var timer = null;
    function autoPlay () {
        timer = setInterval(function () {
            next_pic();
        },2000);
    }
    autoPlay();

    var container = document.querySelector(".container");
    container.onmouseenter = function () {
        clearInterval(timer);
    }
    container.onmouseleave = function () {
        autoPlay();
    }

    var index = 0;
    var dots = document.getElementsByTagName("span");
    function showCurrentDot () {
        for(var i = 0, len = dots.length; i < len; i++){
            dots[i].className = "";
        }
        dots[index].className = "on";
    }

    for (var i = 0, len = dots.length; i < len; i++){
        (function(i){
            dots[i].onclick = function () {
                var dis = index - i;
                if(index == 4 && parseInt(wrap.style.left)!==-3000){
                    dis = dis - 5;
                }
                //和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
                if(index == 0 && parseInt(wrap.style.left)!== -800){
                    dis = 5 + dis;
                }
                wrap.style.left = (parseInt(wrap.style.left) +  dis * 800)+"px";
                index = i;
                showCurrentDot();
            }
        })(i);
    }
</script>
<jsp:include page="template_footer.jsp"></jsp:include>

